<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view class="title-box">
			<view class="title">
				<text class="title1">订单总额：</text>
				<text class="title2">￥ {{total}}</text>
			</view>
		</view>

		<view class="info">
			<view class="info-text">
				支付方式
			</view>
			<view class="wx-content">
				<view class="wx-content-left">
					<image src="/static/images/zhifuweixin.png" style="width:63rpx;height:63rpx;margin-right:34rpx;">
					</image>
					<text class="img-wrapper-center2-year">
						微信支付
					</text>
				</view>
				<image :src="src1" style="width:30rpx;height:30rpx;" @tap="toggle(1)">
				</image>
			</view>
			<view class="wx-content">
				<view class="wx-content-left">
					<image src="/static/images/jifen.png" style="width:63rpx;height:63rpx;margin-right:34rpx;">
					</image>
					<text class="img-wrapper-center2-year">
						积分支付
					</text>
				</view>
				<image :src="src2" style="width:30rpx;height:30rpx;" @tap="toggle(2)">
				</image>
			</view>
		</view>

		<view class="buttons">
			<view class="button" @tap="pay" v-if="!isPaying">
				立即支付
			</view>
			<view class="button" style="background-color: #CCCCCC;" v-else>
				支付中，请勿点击！
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				title: '微信支付',
				id: 0,
				total: '0.00',
				isPaying: false,
				type: 2,
				paytype: 1,
				src1: '/static/images/dui.png',
				src2: '/static/images/weixuanzhong.png',

				appid: "wx5f6ba2c4d12e2e1f",
				openId: ''
			}
		},
		components: {

		},

		computed: {
			...mapState(['hasLogin', 'login'])
		},

		onLoad: function(option) {
			if (option.jobId) {
				this.id = option.jobId
				uni.setStorageSync('jobId', this.id)
			} else {
				this.id = uni.getStorageSync('jobId')
				this.isPaying = true;
			}

			uni.showLoading({
				title: '加载中...'
			});
			this.loadData(this.id);
			this.isLoaded = true;
			uni.hideLoading();

			//微信公众号登录
			// #ifdef H5
			if (this.$wechat && this.$wechat.isWechat()) {
				if (!this.openId) {
					if (window.location.href.indexOf('?code=') !== -1 || window.location.href.indexOf('&code=') !== -
						1) {
						let code;
						if (window.location.href.indexOf('?code=') !== -1) {
							code = window.location.href.split('?code=')[1].split('&')[0];
						} else {
							code = window.location.href.split('&code=')[1].split('&')[0];
						}
						//请求后端网络请求
						this.getWxOpenId(code);
					}
				}
			}
			// #endif
		},
		methods: {
			async loadData(id) {
				let jobObj = await this.$myRequest({
					url: '/company/jobInfo/' + id
				})

				let jobInfo = jobObj.data.data;
				this.total = jobInfo.total
			},

			async toggle(type) {
				switch (type) {
					case 1:
						this.src1 = '/static/images/dui.png';
						this.src2 = '/static/images/weixuanzhong.png';
						this.paytype = 1;
						break;
					case 2:
						this.src1 = '/static/images/weixuanzhong.png';
						this.src2 = '/static/images/dui.png';
						this.paytype = 2;
						break;
				}
			},

			async getWxOpenId(code) {
				let res = await this.$myRequest({
					url: '/getWxOpenId',
					data: {
						code: code
					}
				})

				if (res.data.status == 1) {
					this.openId = res.data.data.openid
					this.confirmPay();
				}
			},

			async confirmPay() {
				uni.showLoading({
					title: '加载中'
				});
				let token = uni.getStorageSync('token');
				if (!token) {
					this.$api.msg('请重新登录', 'none'),
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1000)
				}
				let dataObj = {
					token: token,
					jobId: this.id,
					paytype: 1,
					status: 20,
					type: this.type,
					openid: this.openId
				}
				// console.log(dataObj)
				let res = await this.$myRequest({
					url: '/changeJobStatus',
					data: dataObj,
					methods: 'POST',
				})

				if (res.data.status == 2) {
					let info = res.data.data
					WeixinJSBridge.invoke(
						'getBrandWCPayRequest', {
							"appId": info.appId, //公众号名称，由商户传入     
							"timeStamp": info.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": info.nonceStr, //随机串     
							"package": info.package,
							"signType": info.signType, //微信签名方式：     
							"paySign": info.paySign //微信签名 
						},
						(res) => {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								this.payMaskHide = true; // 隐藏当前支付方式选择
								this.$api.msg('支付成功！', 'success')

								setTimeout(() => {
									uni.redirectTo({
										url: '/pages4/pages/company-orders/company-orders?status=20' +
											'&title=' + encodeURI(
												'工作中')
									})
								}, 1000)
							} else {
								this.$api.msg('支付失败！')
							}
						}
					)
				} else if (res.data.status == 1) {

					let paymentData = res.data.data;
					uni.requestPayment({
						timeStamp: paymentData.timeStamp,
						nonceStr: paymentData.nonceStr,
						package: paymentData.package,
						signType: 'MD5',
						paySign: paymentData.paySign,
						success: (res) => {
							this.$api.msg('支付成功！')
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages4/pages/company-orders/company-orders?status=20' +
										'&title=' + encodeURI(
											'工作中')
								})
							}, 1000)

						},
						fail: (res) => {
							this.$api.msg('支付失败！')
							this.isPaying = false;
						}
					})
				} else {
					this.$api.msg('非法操作！')
				}

				uni.hideLoading()
			},

			async pay() {
				if (this.paytype == 1) {
					// #ifdef H5
					if (this.$wechat && this.$wechat.isWechat()) {
						//微信浏览器
						this.getAccessToken();
					} else {
						//非微信浏览器
					}
					// #endif

					// #ifdef MP-WEIXIN
					this.isPaying = true;
					var that = this
					uni.login({
						provider: "weixin",
						success(loginAuth) {
							that.getOpenId(loginAuth.code)
						}
					})

					// #endif
				} else if (this.paytype == 2) {
					this.isPaying = true;
					let token = uni.getStorageSync('token');
					let dataObj = {
						token: token,
						jobId: this.id
					}
					this.moneyPay(dataObj);
				}
			},

			async getOpenId(code) {
				let res = await this.$myRequest({
					url: '/getAppletOpenId',
					data: {
						code: code
					},
					methods: 'post'
				})

				if (res.data.status == 1) {
					this.openId = res.data.data
					this.type = 1
					this.confirmPay()
				}
			},

			async getAccessToken() {
				//重点 这里getWxAppid这个是微信公众号的appid
				if (!this.openId) {
					window.location.href =
						'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
						this.appid +
						'&redirect_uri=' + encodeURIComponent(
							'https://ldlwn.hnliandesy.com/h5/#/pages4/pages/wxPay/wxPay') +
						'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
				} else {
					return false;
				}
			},

			async moneyPay(dataObj) {
				let res = await this.$myRequest({
					url: '/moneyPay',
					data: dataObj,
					methods: 'POST'
				})
				if (res.data.status == 1) {
					this.$api.msg(res.data.msg, 1000);
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages4/pages/company-orders/company-orders?status=' + encodeURI(
									20) + '&title=' +
								encodeURI('工作中')
						})
					}, 1000)
				} else {
					this.$api.msg(res.data.msg);
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang='scss' scoped>
	.title-box {
		// #ifdef APP-PLUS
		padding-top: 152rpx;
		// #endif

		// #ifdef MP-WEIXIN
		padding-top: 152rpx;
		// #endif

		// #ifdef H5
		padding-top: 100rpx;
		// #endif

		.title {
			width: 100%;
			padding: 0 44rpx;
			background-color: #fff;
			line-height: 120rpx;
			height: 120rpx;
			/* border-bottom: 1px solid #f3f3f6; */

			.title2 {
				height: 42rpx;
				color: #f3431a;
				font-size: 30rpx;
				/* font-weight: bold; */
			}
		}

	}

	.info {
		width: 100%;
		margin-top: 24rpx;
		height: 332rpx;
		padding: 0 44rpx;
		background-color: #fff;
		position: relative;
		border-bottom: 1px solid #f3f3f6;

		.info-text {
			height: 86rpx;
			line-height: 86rpx;
			border-bottom: 1px solid #f3f3f6;
		}

		.wx-content {
			height: 124rpx;
			line-height: 124rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.wx-content-left {
				display: flex;
				align-items: center;
			}
		}

	}

	.buttons {
		width: 100%;
		height: 198rpx;
		padding-top: 100rpx;

		.button {
			width: 90%;
			margin-left: 5%;
			height: 98rpx;
			line-height: 98rpx;
			background-color: #f3431a;
			color: #fff;
			border-radius: 49rpx;
			display: flex;
			justify-content: center;
			letter-spacing: 8rpx;
		}
	}
</style>
